package pages

import (
	"github.com/templui/templui/internal/components/card"
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Form() {
	@layouts.DocsLayout(
		"Form",
		"A collection of form components and helper utilities for building accessible forms.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "item",
						Text: "Item",
					},
					{
						ID:   "itemflex",
						Text: "ItemFlex",
					},
					{
						ID:   "label",
						Text: "Label",
					},
					{
						ID:   "description",
						Text: "Description",
					},
					{
						ID:   "message",
						Text: "Message",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Form",
			Description: templ.Raw("A collection of form components and helper utilities for building accessible forms."),
			Tailwind:    true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Form",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				SectionName:     "",
				ShowcaseFile:    showcase.InputForm(),
				PreviewCodeFile: "input_form.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "form",
				})
			}
			<div>
				@card.Card() {
					@card.Header() {
						@card.Title() {
							Usage
						}
						@card.Description() {
							Form elements are composed using a set of helper components that enhance the following form controls:
						}
					}
					@card.Content() {
						<ul class="list-disc pl-6 space-y-2">
							<li>
								<a href="/docs/components/checkbox#form" class="font-medium hover:underline">Checkbox</a>
							</li>
							<li>
								<a href="/docs/components/date-picker#form" class="font-medium hover:underline">Date Picker</a>
							</li>
							<li>
								<a href="/docs/components/input#form" class="font-medium hover:underline">Input</a>
							</li>
							<li>
								<a href="/docs/components/input-otp#form" class="font-medium hover:underline">Input OTP</a>
							</li>
							<li>
								<a href="/docs/components/radio#form" class="font-medium hover:underline">Radio</a>
							</li>
							<li>
								<a href="/docs/components/select-box#form" class="font-medium hover:underline">Select Box</a>
							</li>
							<li>
								<a href="/docs/components/textarea#form" class="font-medium hover:underline">Textarea</a>
							</li>
							<li>
								<a href="/docs/components/tags-input#form" class="font-medium hover:underline">Tags Input</a>
							</li>
							<li>
								<a href="/docs/components/time-picker#form" class="font-medium hover:underline">Time Picker</a>
							</li>
							<li>
								<a href="/docs/components/toggle#form" class="font-medium hover:underline">Toggle</a>
							</li>
							<li>
								<a href="/docs/components/rating#form" class="font-medium hover:underline">Rating</a>
							</li>
						</ul>
					}
				}
			</div>
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="item" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Item",
						Description: "Container for form fields with vertical spacing layout.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the form item container.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the form item.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the form item element.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="itemflex" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "ItemFlex",
						Description: "Container for form fields with horizontal flex layout (for inline forms).",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the flex form item container.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the flex form item.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the flex form item element.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="label" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Label",
						Description: "Label element for form controls with proper accessibility association.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the label element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the label.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the label element.",
								Required:    false,
							},
							{
								Name:        "For",
								Type:        "string",
								Default:     "",
								Description: "ID of the form control this label is associated with.",
								Required:    false,
							},
							{
								Name:        "DisabledClass",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply when the associated control is disabled.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="description" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Description",
						Description: "Descriptive text to provide additional context for form fields.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the description element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the description text.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the description element.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="message" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Message",
						Description: "Message text for displaying validation errors or informational messages.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the message element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the message text.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the message element.",
								Required:    false,
							},
							{
								Name:        "Variant",
								Type:        "MessageVariant",
								Default:     "",
								Description: "Message type that determines styling. Options: 'error', 'info'.",
								Required:    false,
							},
						},
					})
				</div>
			}
		}
	}
}
